<div
  class="visualize-show-spy"
  ng-if="modes.length > 0"
>
  <button
    data-test-subj="spyToggleButton"
    ng-click="toggleDisplay()"
    class="kuiCollapseButton visualize-show-spy-tab"
    type="button"
  >
    <span
      class="kuiIcon"
      ng-class="shouldShowSpyPanel() ? 'fa-chevron-circle-down' : 'fa-chevron-circle-up'"
    ></span>
  </button>
</div>

<div
  data-test-subj="spyContainer"
  class="visualize-spy-container"
  ng-class="{ 'only': maximizedSpy || forceMaximized }"
  ng-show="shouldShowSpyPanel()"
>
  <div class="visualize-spy__tab-container euiTabs euiTabs--small">
    <div role="tablist" class="visualize-spy__tabs" data-test-subj="spyModTabs">
      <button
        role="tab"
        class="euiTab"
        ng-repeat="mode in modes"
        aria-selected="{{mode.name === currentMode}}"
        ng-class="{'euiTab-isSelected': mode.name === currentMode}"
        data-test-subj="spyModeSelect-{{::mode.name}}"
        ng-click="setSpyMode(mode.name)"
      >
        <span class="euiTab__content">
          {{::mode.display}}
        </span>
      </button>
    </div>

    <button
      data-test-subj="toggleSpyFullscreen"
      aria-label="Toggle spy panel fullscreen"
      class="kuiButton kuiButton--hollow"
      ng-hide="forceMaximized"
      ng-click="toggleMaximize()"
    >
      <span
        class="kuiIcon"
        ng-class="currentMode.fill ? 'fa-compress' : 'fa-expand'"
      ></span>
    </button>
  </div>

  <div
    data-test-subj="spyContentContainer"
    data-spy-content-container
    class="kuiVerticalRhythm visualize-spy__content-container"
  ></div>
</div>
